<template>
  <el-card
    class="searchForm"
    :body-style="{
      display: 'flex',
      'justify-content': 'space-between',
      'align-items': 'center',
    }"
  >
    <el-form
      :inline="true"
      :model="form"
      label-suffix="："
      ref="formRef"
      @submit.prevent
      @keyup.enter="handleSearch"
    >
      <el-form-item label="模型名称" prop="name">
        <el-input v-model="form.name" clearable />
      </el-form-item>
      <br />
      <el-form-item label="">
        <el-button type="primary" @click="handleSearch"> 查询 </el-button>
        <el-button @click="handleClear"> 重置 </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { computed, PropType, ref } from 'vue'

import { IElForm } from '@/types/element-plus'

interface ISearchData {
  name: string
  bookId: string
  taskOwnerId: string
}

const props = defineProps({
  form: {
    type: Object as PropType<ISearchData>,
    required: true,
  },
})

interface EmitType {
  (e: 'update:form', value: ISearchData): void
  (e: 'search', value: ISearchData): void
}
const emit = defineEmits<EmitType>()

const form = computed({
  get() {
    return props.form
  },
  set(newValue) {
    emit('update:form', newValue)
  },
})

const handleSearch = () => {
  emit('search', form.value)
}

const formRef = ref<IElForm>()
const handleClear = () => {
  form.value = {
    bookId: '',
    name: '',
    taskOwnerId: '',
  }
  handleSearch()
}
</script>

<style scoped lang="scss">
.searchForm {
  margin-bottom: 10px;
  .searchInput {
    width: 240px;
  }
  .clear {
    margin-left: 10px;
  }
}
</style>
